@import "../../.cache/material/colors.css";

window.bar {
    background-color: @surface;
}

.bar label {
    font-weight: bold;
}

button,
box {
    background: transparent;
    transition-timing-function: ease-out;
    background-image: radial-gradient(circle, transparent 10%, transparent 0%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1000% 1000%;
    background-color: transparent;
}

button:active,
box:active {
    transition-duration: 0.3s, 0ms, 0ms, 0.2s, 0.2s, 0.2s;
    animation: ripple 0.3s ease-out forwards;
    background-size: 0% 0%;
}

highlight {
    border-radius: 100px;
}

* {
    margin: 0px;
    border: none;
    outline: none;
    box-shadow: none;

    transition-property: border-image, background-size, background-image, color, background-color, border-color;
    transition-duration: 0.3s, 0.3s, 0.3s, 0.2s, 0.2s, 0.2s;

    font-family: "Product Sans", Roboto, "Font Awesome 6 Free", Helvetica, Arial, sans-serif;
}

.corner {
    background-color: @background;
    border-radius: 34px;
}

tooltip {
    background-color: @surfaceContainer;
    border-radius: 11px;
    outline: none;
    border: none;
    box-shadow: none;
}

tooltip label {
    color: @onSurface;
    outline: none;
    border: none;
    box-shadow: none;
    font-weight: normal;
}

menu {
    background: @surfaceContainer;
}

menuitem {
    color: @onSurface;
}

menuitem:disabled {
    color: mix(@onSurface, transparent, 0.38);
}

menu separator {
    color: @outline;
}

separator {
    color: @outline;
    margin-right: 0px;
    margin-left: 0px;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 0px;
}

/* -----------------------------------------------------
 * Modules
 * ----------------------------------------------------- */

.modules_left,
.modules_center,
.modules_right {
    padding-top: 6px;
    padding-bottom: 6px;
    margin-left: 12px;
    margin-right: 12px;
}

/* -----------------------------------------------------
 * Workspaces
 * ----------------------------------------------------- */

.workspaces {
    border-radius: 16px;
    font-weight: bold;
    font-style: normal;
    font-size: 16px;
    color: @onSurface;
    background: @surfaceContainer;
    padding-left: 4px;
    padding-right: 4px;
}

.workspaces * {
    transition: all 0.35s ease-in-out;
}

.workspaces button {
    padding: 0px 5px;
    margin: 4px 0px;
    margin-right: 3px;
    border-radius: 16px;
    border: 0px;
}

.workspaces button:last-child {
    margin-right: 0px;
}

.workspaces button label {
    color: @onSurface;
    font-weight: bold;
}

.workspaces button:hover {
    color: @onSurface;
    background-color: mix(@onSurface, @surface, 0.85);
}

.workspaces button:not(.exists) label {
    color: @onSurfaceVariant;
    opacity: 0.6;
}

.workspaces button.active {
    background: @secondaryContainer;
}

.workspaces button.active label {
    color: @onSecondaryContainer;
}

/* -----------------------------------------------------
 * Clock
 * ----------------------------------------------------- */

.clock {
    background-color: @surfaceContainer;
    border-radius: 16px;
    padding: 2px 10px 0px 10px;
}

.time {
    color: @onSurface;
    font-size: 14px;
    font-feature-settings: "tnum";
}

.date {
    color: @onSurface;
    font-size: 10px;
    font-feature-settings: "tnum";
}

/* -----------------------------------------------------
 * Tray
 * ----------------------------------------------------- */

.tray {
    background-color: @surfaceContainer;
    border-radius: 16px;
    padding: 2px 10px 0px 10px;
}

.tray button {
    margin: 0px;
    padding: 0px;
}

.tray image {
    color: @onSurface;
}

/* -----------------------------------------------------
 * Notifications
 * ----------------------------------------------------- */

window.notification_popups box.notifications {
    padding: 14px;
}

.notification_icon {
    min-width: 68px;
    min-height: 68px;
    margin-right: 1em;
}

.notification_icon image {
    font-size: 58px;
    /* to center the icon */
    margin: 5px;
    color: @onSurface;
}

.notification_icon box {
    min-width: 68px;
    min-height: 68px;
    border-radius: 7px;
}

.notification {
    min-width: 350px;
    border-radius: 20px;
    padding: 1em;
    margin-bottom: 2px;
    background-color: @surfaceContainerLow;
}

.notification.critical {
    border: 2px solid @error;
}

.notification_title {
    color: @foreground;
    font-size: 1.4em;
}

.notification_body {
    color: @foreground;
}

.notification_actions .notification_action_button {
    margin: 0 0.4em;
    margin-top: 0.8em;
}

.notification_action_button {
    background-color: @primary;
    color: @onPrimary;
}

.notification_actions .notification_action_button:first-child {
    margin-left: 0;
}

.notification_actions .notification_action_button:last-child {
    margin-right: 0;
}

.notification_time {
    color: @primary;
}

.notification_close .icon {
    font-weight: 300;
}

/* -----------------------------------------------------
 * Misc
 * ----------------------------------------------------- */

.bold_label {
    font-weight: bold;
}

.keyboard {
    background-color: @surfaceContainer;
    color: @onSurface;
    padding: 0px 10px 0px 10px;
    border-radius: 100px;
}

.awesome_icon {
    font-family: "Font Awesome 6 Free";
}

.battery {
    background-color: @surfaceContainer;
    border-radius: 100px;
    padding: 2px 10px 2px 10px;
}

.battery label {
    color: @onSurface;
    font-size: 16px;
    font-weight: 300;
}

.battery .icon {
    color: @onSurface;
}

.battery.critical {
    background-color: @error;
}

.battery.critical label,
.battery.critical .icon {
    color: @onError;
}

.bar_applets {
    background-color: @surfaceContainer;
    border-radius: 100px;
    padding: 2px 10px 2px 10px;
    margin: 0px;
}

.bar_applets .icon {
    color: @onSurface;
    font-weight: 600;
}

.bar_applets button {
    color: @onSurface;
    margin: 0px;
    padding: 0px;
}

/* -----------------------------------------------------
 * Sideright
 * ----------------------------------------------------- */

.sidebar_main_box {
    background: @surfaceContainerLowest;
}

.sidebar_main_box .empty {
    color: @onSurface;
}

.management_box {
    padding: 15px;
    padding-bottom: 0px;
    outline: none;
    border: none;
}

.management_button {
    min-width: 170px;
    min-height: 50px;
}

.management_button {
    border-radius: 25px;
    background: @surfaceContainer;
    border: none;
    outline: none;

    transition-property: border-image, background-size, background-image, color, background-color, border-color;
    transition-duration: 0.3s, 0.3s, 0.3s, 0.2s, 0.2s, 0.2s;

    transition-timing-function: ease-out;
    outline: none;
    background-image: radial-gradient(circle, transparent 10%, transparent 0%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1000% 1000%;
}

.management_button label {
    color: @onSurface;
    font-weight: normal;
    transition: color 0.2s;
}

.ssid {
    font-size: 12px;
}

.management_button .icon {
    color: @onSurface;
    margin-right: 5px;
    transition: color 0.2s;
    font-weight: 400;
}

.management_button .arrow {
    margin-right: 0px;
    transition: color 0.2s;
}

.management_button:hover {
    background-color: mix(@onSurfaceVariant, @surface, 0.9);
}

.management_button:active {
    background-image: radial-gradient(circle, mix(@onSurface, @surface, 0.85) 10%, transparent 0%);
}

.management_button.active label {
    color: @onPrimary;
}

.management_button.active .icon {
    color: @onPrimary;
    font-weight: normal;
}

.management_button.active {
    background-color: @primary;
    transition-duration: 0.3s, 0ms, 0.3s, 0.2s, 0.3s, 0.2s;
    animation: ripple 0.3s ease-out forwards;
    background-size: 0% 0%;
    border: 0px solid;
    background-image: radial-gradient(circle, @primary 10%, mix(@onSurface, @surface, 0.85) 0%);
}

.management_button.active:active {
    background-image: radial-gradient(circle, transparent 10%, transparent 0%);
}

.management_button.waiting label {
    color: @onError;
}

.management_button.waiting .icon {
    color: @onError;
}

.management_button.waiting {
    background-color: @error;
    border: 0px solid;
}

.management_button.disabled {
    background: transparent;
}

.sidebar_bottom {
    background-color: @surface;
    border-radius: 24px 24px 0px 0px;
    transition: all 0.25s ease-in-out;
}

.no_notifications {
    color: @onSurface;
}

.notifications_sidebar_scrollable {
    padding-top: 6px;
}

.notifications_sidebar_scrollable scrollbar {
    opacity: 0.1;
}

.notifications_sidebar_scrollable .notification {
    margin-left: 10px;
    margin-right: 9px;
    margin-top: 4px;
    border-radius: 6px;
    padding: 15px;
    background-color: @surfaceContainerLow;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.2s ease-in-out, border-radius 0.1s ease-in-out;
}

.notifications_sidebar_scrollable viewport > box > box > .first .notification {
    border-radius: 14px 14px 6px 6px;
}

.notifications_sidebar_scrollable viewport > box > box > .last .notification {
    border-radius: 6px 6px 14px 14px;
}

.notifications_sidebar_scrollable viewport > box > box > .margin_bottom .notification {
    margin-bottom: 10px;
}

.notifications_sidebar_scrollable viewport > box > box > .first.last .notification {
    border-radius: 14px;
}

.notifications_sidebar_scrollable .notification_time {
    color: @primary;
}

.notifications_sidebar_scrollable viewport > box > :last-child {
    margin-bottom: 10px;
}

.notifications_sidebar_scrollable {
    padding-right: 1px;
    color: @primary;
}

.system_box {
    padding: 10px;
}

.system_scale slider {
    color: @onPrimary;
    background-color: @primary;
    background-size: 20px 20px;
    min-width: 30px;
    min-height: 23px;
    border-radius: 100px;
    padding: 0px;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: -16px;
    margin-bottom: -16px;
}

.system_scale.backlight slider {
    background-image: -gtk-scaled(url("../../.cache/material/svg/brightness-onPrimary.svg"));
}

.system_scale.backlight {
    margin-bottom: 25px;
}

.system_scale.brightness slider {
    background-image: -gtk-scaled(url("../../.cache/material/svg/dark-onPrimary.svg"));
}

.system_scale {
    padding: 0px;
    margin: 0px;
}

.system_scale trough {
    background-color: @secondaryContainer;
    min-height: 6px;
    margin-right: 4px;
    margin-left: 4px;
}

.system_scale highlight {
    border-radius: 100px 0px 0px 100px;

    margin-top: -13px;
    margin-bottom: -13px;
    margin-left: -16px;
    background-color: @primary;
}

.system_box .slider_box,
.system_box .usage_box,
.system_box .info_box {
    background-color: @surfaceContainerLow;
    padding: 26px;
    border-radius: 14px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24);
}

.system_box .usage_box {
    padding: 10px;
}

.system_box .usage_box_inner {
    padding: 10px;
}

.system_box .info_box {
    padding: 20px;
}

.usage_bar trough {
    background-color: @secondaryContainer;
    min-height: 6px;
}

.usage_bar progress {
    min-width: 6px;
    min-height: 6px;
    background-color: @primary;
    box-shadow: 5px 0px 0px 1px @surfaceContainerLow;
    border-radius: 100px;
}

.usage_box label {
    color: @onSurface;
}

.info_box label {
    color: @onSurface;
}

.usage_bar_point {
    background-color: @primary;
    min-width: 6px;
    min-height: 6px;
    border-radius: 100%;
}

.sidebar_buttons {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    outline: none;
    border: none;
}

.dotbuttons_box {
    margin-bottom: 15px;
}

.dotbutton {
    font-size: 10px;
    margin: 0px;
    padding: 3px;
    transition: none;
}

.dotbutton label {
    color: @surfaceContainerHigh;
}

.dotbutton:hover {
}

.dotbutton.active label {
    color: @secondary;
}

/* -----------------------------------------------------
 * Buttons
 * ----------------------------------------------------- */

/* outline */
.outline_button {
    background-color: transparent;
    border: 1.2px solid;
    border-color: @outline;
    border-radius: 100px;
    padding-left: 24px;
    padding-right: 24px;
}

.outline_button label,
.outline_button .icon,
.outline_button .awesome_icon,
.outline_button image {
    color: @primary;
    font-weight: 300;
}

.outline_button:hover {
    background-color: mix(@primaryFixed, transparent, 0.8);
}

.outline_button:focus {
    background-color: mix(@primaryFixed, transparent, 0.8);
    border-color: @primary;
}

.outline_button:active {
    background-image: radial-gradient(circle, mix(@primaryFixed, transparent, 0.7) 10%, transparent 0%);

    /* background-color: mix(@primaryFixed, transparent, 0.9); */
    /* border-color: @primary; */
}

/* filled tonal */
.filled_tonal_button {
    background-color: @secondaryContainer;
    color: @onSecondaryContainer;
    border-radius: 100px;
    min-width: 35px;
    padding: 0px;
}

.filled_tonal_button label,
.filled_tonal_button .icon,
.filled_tonal_button .awesome_icon,
.filled_tonal_button image {
    color: @onSecondaryContainer;
    font-weight: 400;
    margin: 0px;
}

.filled_tonal_button:hover {
    background-color: mix(@secondaryContainer, @onSecondaryContainer, 0.05);
    box-shadow: 00px 3px 3px -2px rgba(0, 0, 0, 0.2);
}

.filled_tonal_button:active {
    background-image: radial-gradient(circle, mix(@secondaryContainer, @onSecondaryContainer, 0.1) 10%, transparent 0%);
    /* background-color: mix(@secondaryContainer, @onSecondaryContainer, 0.1); */
    box-shadow: none;
}

/* standard icon button */
.standard_icon_button {
    border-radius: 100px;
    background-color: transparent;
    color: @onSurfaceVariant;
}

.standard_icon_button label,
.standard_icon_button .icon,
.standard_icon_button .awesome_icon,
.standard_icon_button image {
    color: @onSurfaceVariant;
    margin: 0px;
    padding: 0px;
}

.standard_icon_button:hover {
    background-color: mix(@onSurfaceVariant, transparent, 0.8);
}

.standard_icon_button:active {
    background-image: radial-gradient(circle, mix(@onSurfaceVariant, transparent, 0.7) 10%, transparent 0%);
}

/* standard button */
.standard_button {
    border-radius: 100px;
    background-color: transparent;
    color: @onSurfaceVariant;
    padding-left: 24px;
    padding-right: 24px;
}

.standard_button label,
.standard_button .icon,
.standard_button .awesome_icon,
.standard_button image {
    color: @onSurfaceVariant;
    margin: 0px;
    padding: 0px;
}

.standard_button:hover {
    background-color: mix(@onSurfaceVariant, @surface, 0.8);
}

.standard_button:active:not(.disabled) {
    background-image: radial-gradient(circle, mix(@onSurfaceVariant, @surface, 0.7) 10%, transparent 0%);
}

.standard_button.disabled {
    background-color: transparent;
}

.standard_button.disabled label,
.standard_button.disabled .icon,
.standard_button.disabled .awesome_icon,
.standard_button.disabled image {
    color: mix(@onSurface, transparent, 0.38);
}

/* filled button */
.filled_button {
    border-radius: 100px;
    background-color: @primary;
    color: @onPrimary;
    padding-left: 24px;
    padding-right: 24px;
}

.filled_button label,
.filled_button .icon,
.filled_button .awesome_icon,
.filled_button image {
    color: @onPrimary;
    margin: 0px;
    padding: 0px;
}

.filled_button:hover {
    background-color: mix(@onPrimary, @primary, 0.92);
}

.filled_button:active:not(.disabled) {
    background-image: radial-gradient(circle, mix(@onPrimary, @primary, 0.8) 10%, transparent 0%);
}

.filled_button.disabled {
    background-color: mix(@onSurface, @surface, 0.12);
    color: mix(@onSurface, @surface, 0.38);
}

.filled_button.disabled label,
.filled_button.disabled .icon,
filled_button.disabled .awesome_icon,
.filled_button.disabled image {
    color: mix(@onSurface, @surface, 0.38);
}

/* -----------------------------------------------------
 * Navigation bar/rail
 * ----------------------------------------------------- */

.navigation {
    background-color: @surfaceContainer;
    padding-top: 3px;
    padding-bottom: 3px;
}

.rail {
    background-color: @surface;
    padding-top: 3px;
    padding-bottom: 3px;
}

.navigation .label,
.rail .label {
    font-weight: normal;
    font-size: 12px;
    margin-top: 3px;
    color: @onSurface;
}

.rail .label {
    font-weight: 500;
}

.navigation_button .container {
    transition-property: all, border-image, background-size, background-image;
    transition-duration: 0.3s, 0.3s, 0.3s, 0.3s;
    transition-timing-function: ease-out;
    background-image: radial-gradient(circle, transparent 10%, transparent 0%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1000% 1000%;

    border-radius: 16px;
    padding-left: 5px;
    padding-right: 5px;
    min-height: 25px;
    min-width: 0px;
}

.rail .navigation_button .container {
    padding-left: 12px;
    padding-right: 12px;
    min-height: 28px;
}

.navigation_button .icon {
    font-weight: 400;
    color: @onSurface;
}

.navigation_button.active .icon {
    color: @onSecondaryContainer;
}

.navigation_button .container_outer {
    min-width: 56px;
}

.rail .navigation_button .container_outer {
    margin-bottom: 12px;
}

.navigation_button:hover .container {
    background-color: mix(@onSurface, @surfaceContainer, 0.92);
    min-width: 40px;
}

.rail .navigation_button:hover .container {
    min-width: 26px;
}

.navigation_button:active .container {
    transition-duration: 0.3s, 0.3s, 0ms, 0ms;
    animation: ripple 0.3s ease-out forwards;
    background-size: 0% 0%;

    background-image: radial-gradient(circle, mix(@onSurface, @surfaceContainer, 0.87) 10%, transparent 0%);
    min-width: 40px;
}

.navigation_button.active .container {
    background-color: @secondaryContainer;
    background-image: radial-gradient(circle, @secondaryContainer 10%, transparent 0%);
    min-width: 40px;
}

.rail .navigation_button.active .container {
    min-width: 26px;
}

/* -----------------------------------------------------
 * Switch
 * ----------------------------------------------------- */

switch {
    border: 2px solid;
    border-radius: 100px;
    border-color: @outline;
    background-color: @surfaceContainerHighest;
    min-height: 20px;
    padding: 1px;
}

switch slider {
    border-radius: 100%;
    background-color: @outline;
    min-height: 10px;
    margin: 2px;
    min-height: 8px;
    min-width: 16px;
    transition: all 0.2s ease-in-out;
    transition-property: color, background-color, border-color;
}

switch:disabled {
    background-color: mix(@surfaceContainerHighest, transparent, 0.3);
    border-color: mix(@onSurface, transparent, 0.3);
}

switch:disabled slider {
    background-color: mix(@onSurface, transparent, 0.3);
}

switch:hover,
switch:active {
    background-color: mix(@surfaceContainerHighest, @onSurface, 0.08);
}

switch:hover slider,
switch:active slider {
    background-color: @onSurfaceVariant;
}

switch:checked {
    background-color: @primary;
    border-color: transparent;
}

switch:checked slider {
    background-color: @onPrimary;
    border-color: transparent;
    margin: 0px;
    min-height: 10px;
    min-width: 20px;
}

switch:checked:disabled {
    background-color: mix(@onSurface, transparent, 0.3);
    border-color: transparent;
}

switch:checked:disabled slider {
    background-color: mix(@surface, transparent, 0.3);
}

switch:checked:hover,
switch:checked:active {
    background-color: @primary;
}

switch:checked:hover slider,
switch:checked:active slider {
    background-color: @primaryContainer;
}

/* -----------------------------------------------------
 * Cheatsheet
 * ----------------------------------------------------- */

.cheatsheet flowbox {
    margin-top: 14px;
    margin-bottom: 14px;
    background-color: @background;
    border-radius: 20px;
    border: 1px solid @outlineVariant;
    padding: 5px;
}

.cheatsheet .category {
    background-color: @surfaceContainerLow;
    border-radius: 12px;
    padding-top: 7px;
    padding-bottom: 7px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24);
}

.cheatsheet .category separator {
    margin-top: 4px;
    margin-bottom: 4px;
    color: @outline;
}

.cheatsheet .category .row {
    margin-bottom: 2px;
    margin-left: 7px;
    margin-right: 7px;
}

.cheatsheet .category .key {
    background-color: @surfaceContainerLowest;
    padding-left: 4px;
    padding-right: 4px;
    min-width: 15px;
    font-size: 15px;
    color: @onSurface;
    border-radius: 4px;
    border: 1px solid @outlineVariant;
}

.cheatsheet .category .plus {
    margin-left: 4px;
    margin-right: 4px;
    color: @outline;
}

.cheatsheet .category .separator {
    color: @outline;
}

.cheatsheet .category .description {
    color: @onSurfaceVariant;
    font-size: 16px;
}

.cheatsheet .category .title {
    font-weight: bold;
    color: @onSurface;
    margin-left: 7px;
    margin-right: 7px;
    font-size: 17px;
}

.cheatsheet .category .material_icon {
    margin-left: 7px;
    font-weight: 400;
}

.cheatsheet .category .awesome_icon.key {
    padding: 4px;
}

/* -----------------------------------------------------
 * Sideleft
 * ----------------------------------------------------- */

.sideleft {
    background-color: @surface;
    padding-top: 12px;
}

.sideleft .page {
    min-width: 320px;
}

.sideleft .card {
    background-color: @surfaceContainerLow;
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 10px;
    margin-right: 12px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24);
    margin-left: 2px;
}

.sideleft .card {
    color: @onSurface;
}

.sideleft .main_title {
    color: @onSurface;
    font-size: 24px;
    font-weight: 400;
    margin: 0px;
    margin-left: 2px;
    margin-bottom: 5px;
}

/* weather */
.weather .icon {
    margin-right: 8px;
    text-shadow: 0px 0px 2px mix(@shadow, transparent, 0.75);
}

.weather .description {
    color: @onSurface;
    font-weight: 400;
    font-size: 16px;
}

.weather .current {
    font-weight: 900;
    font-size: 38px;
    margin: 0px;
    margin-right: 4px;
    color: @onSurface;
}

.weather .min,
.weather .max {
    font-weight: 400;
    font-size: 16px;
    color: @onSurfaceVariant;
}

.weather .title {
    font-weight: 500;
    font-size: 17px;
    color: @onSurface;
    margin-right: 4px;
}

.weather .primary_label {
    font-weight: 400;
    font-size: 16px;
    color: @onSurface;
    margin-right: 2px;
}

.weather .label {
    font-weight: 400;
    font-size: 16px;
    color: @onSurfaceVariant;
}

.weather separator {
    margin-right: 4px;
}

.sideleft .info_box {
    background-color: @surfaceContainerHigh;
    padding: 6px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 100px;
    margin-top: 12px;
    min-width: 75px;
}

.sideleft .info_box .icon {
    color: @primary;
    margin: 0px;
    margin-right: 4px;
}

/* players */
.sideleft .player {
    min-width: 340px;
}

.sideleft .player .img {
    min-width: 100px;
    min-height: 100px;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    color: @foreground;
}

.sideleft .player .title {
    font-size: 20px;
    margin-left: 10px;
    color: @foreground;
}

.sideleft .player .artist {
    font-size: 18px;
    margin-left: 10px;
    color: @foreground;
}

.sideleft .player .length {
    color: @foreground;
}

.sideleft .player .position {
    color: @foreground;
    margin-left: 10px;
}

.sideleft .player .icon {
    color: @foreground;
    font-weight: 600;
}

.sideleft .player scale.position {
    padding: 0;
    margin-bottom: 0.3em;
    margin-left: 10px;
}

.sideleft .player scale.position trough {
    background-color: @secondaryContainer;
    min-height: 6px;
}

.sideleft .player scale.position highlight {
    background-color: @primary;
    box-shadow: 5px 0px 0px 1px @surfaceContainerLow;
    min-width: 6px;
    min-height: 6px;
}

.sideleft .player scale.position slider {
    all: unset;
}

.sideleft .player button {
    min-height: 1em;
    min-width: 1em;
    padding: 0.3em;
    padding-top: 0px;
    padding-bottom: 0px;
    color: @onSecondary;
}

.sideleft .player button .icon {
    color: @onSecondary;
}

.sideleft .player_buttons {
    background-color: @secondary;
    border-radius: 100px;
    padding: 3px;
    margin-top: 2px;
}

/* applauncher */
.sideleft .applauncher_box {
    border-radius: 20px;
    background-color: @background;
    margin-right: 12px;
}

.sideleft .applauncher_box separator {
    margin: 0px;
}

.sideleft .applauncher_entry {
    margin: 11px;

    background-color: @surfaceContainerHigh;
    border: none;
    outline: none;
    border-radius: 100px;
    margin-bottom: 16px;
    margin-top: 0px;
    padding: 5px;
    font-weight: normal;
    padding-left: 25px;
}

.sideleft .application_container label {
    color: @onSurface;
    font-weight: normal;
}

.sideleft .application_container {
    border-radius: 0px;
    border: none;
    outline: none;
    margin: 0px;
    min-height: 47px;
}

.sideleft .application_container image {
    margin-left: 11px;
}

.sideleft .application_container:hover {
    background-color: mix(@onSurface, @surface, 0.92);
}

.sideleft .application_container:focus {
    background-color: mix(@onSurface, @surface, 0.8);
    border: 0px solid;
    border: none;
    outline: none;
}

.sideleft .application_container:active {
    background-image: radial-gradient(circle, mix(@onSurface, @surface, 0.78) 10%, transparent 0%);
}

.sideleft .application_divider {
    color: @outline;
    margin: 0px 0px 0px 0px;
}

.sideleft .application_label {
    color: @onSurface;
}

.sideleft .application_icon {
    margin-right: 16px;
    color: @onSurface;
}
/* Chats */
.sideleft .textbox {
    background-color: transparent;
    padding: 5px;
    border-radius: 4px;
    margin-right: 12px;
    margin-bottom: 8px;
    box-shadow: inset 0 0 0 1px @outline;
    transition: box-shadow 0.2s ease-in-out;
}

.sideleft .textbox scrollbar {
    opacity: 0;
}

.sideleft .send .icon {
    font-weight: 400;
}

.sideleft .send {
    padding: 5px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.sideleft .placeholder label {
    color: @onSurfaceVariant;
}

.sideleft .chat_wrapper {
    transition: min-height 0.35s ease-in-out;
}

.sideleft .chat_wrapper scrollbar {
    opacity: 0;
}

.sideleft .chat_wrapper_extended {
    min-height: 5rem;
}

.sideleft .chat_wrapper_extended scrollbar {
    opacity: 0.1;
}

.sideleft .textbox.focused {
    box-shadow: inset 0 0 0 2px @primary;
}

.sideleft .chat_wrapper text {
    background-color: transparent;
}

.sideleft .latex * {
    color: @onSurface;
}

.sideleft .message {
    background-color: @surfaceContainerLow;
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 10px;
    box-shadow: 0px 0px 2px mix(@shadow, transparent, 0.75);
    margin-right: 12px;
    margin-left: 2px;
}

.sideleft .message label {
    color: @onSurface;
}

.sideleft .message.ephemeral {
    background-color: @surface;
    box-shadow: none;
    border: 1px solid @outlineVariant;
}

.codeblock_top_bar {
    border-radius: 12px 12px 0px 0px;
    background-color: @surfaceContainerLowest;
    padding-left: 6px;
    padding-right: 6px;
}

.codeblock_top_bar_text {
    font-weight: 400;
    font-size: 16px;
}

.codeblock_top_bar_button {
    border-radius: 12px;
    padding: 0px;
    padding-left: 6px;
    padding-right: 6px;
    margin-top: 6px;
    margin-bottom: 6px;
}

.codeblock_code text,
.codeblock_code {
    background-color: transparent;
}

.codeblock_code textview {
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
    border-radius: 0px 0px 12px 12px;
    background-color: @surfaceContainerLowest;
}

.sideleft .divider {
    background-color: @outlineVariant;
}

.sideleft .chat_name {
    font-size: 17px;
    font-weight: 500;
}

.sideleft .description {
    font-size: 15px;
}

.sideleft .name {
    font-size: 17px;
}

/* Gemini */
.gemini .command_button {
    padding: 6px;
    padding-left: 8px;
    padding-right: 8px;
}

.gemini .command_buttons {
    margin-right: 12px;
    margin-bottom: 4px;
    margin-top: 4px;
}

.gemini .skeleton_line {
    min-width: 4px;
    min-height: 4px;
    background-color: transparent;
    animation: pulsate 2s infinite;
    border-radius: 100%;
}

@keyframes pulsate {
    0% {
        background-color: transparent;
    }
    50% {
        background-color: @outline;
    }
    100% {
        background-color: transparent;
    }
}

/* Chatrooms */
.chats .filled_tonal_button {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.chats .login,
.chats .room {
    margin-right: 12px;
    margin-top: 10px;
}

.chats entry {
    background-color: transparent;
    padding: 5px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px @outline;
    transition: box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
    color: @onSurface;
}

.chats entry:focus {
    box-shadow: inset 0 0 0 2px @primary;
}

/* -----------------------------------------------------
 * Popups
 * ----------------------------------------------------- */
.popups {
    background-color: transparent;
}

.popups .popup {
    background-color: @surfaceContainer;
    margin-top: 14px;
    padding: 4px;
    border-radius: 14px;
}

.popup_slider {
    min-width: 150px;
}

.popup .icon {
    margin-left: 4px;
}

.popup_slider slider {
    color: @onPrimary;
    background-color: @primary;
    background-size: 20px 20px;
    min-width: 5px;
    min-height: 14px;
    border-radius: 100px;
    padding: 0px;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: -16px;
    margin-bottom: -16px;
    box-shadow: -4px 0px 0px 1px @surfaceContainer, 4px 0px 0px 1px @surfaceContainer;
}

.popup_slider trough {
    background-color: @secondaryContainer;
    min-height: 10px;
    margin-right: 4px;
}

.popup_slider highlight {
    border-radius: 100px 0px 0px 100px;
    background-color: @primary;
}

/* -----------------------------------------------------
 * Audio
 * ----------------------------------------------------- */

.audio .tabs button {
    border-radius: 0px;
    border-bottom: 1px solid @surfaceVariant;
}

.audio .tabs button:hover {
    background-color: mix(@onSurfaceVariant, transparent, 0.8);
}

.audio .tabs button:active {
    background-image: radial-gradient(circle, mix(@onSurfaceVariant, transparent, 0.7) 10%, transparent 0%);
}

.audio .tabs .active button {
    border-color: @primary;
}

.audio .tabs {
    margin-bottom: 4px;
}

.audio_box {
    background-color: @background;
    border-radius: 20px;
    border: 1px solid @outlineVariant;
    padding: 6px;
    margin-right: 14px;
    margin-top: 14px;
}

.audio .icon {
    color: @onSurface;
}

.audio scrollbar {
    opacity: 0;
}

.audio scrollbar:hover {
    opacity: 0.1;
}

.audio .device {
    background-color: @surfaceContainerLow;
    border-radius: 6px;
    min-width: 300px;
    margin-top: 3px;
    padding: 10px;
    padding-bottom: 6px;
}

.audio .device:first-child {
    border-radius: 14px 14px 6px 6px;
    margin-top: 0px;
}

.audio .device:last-child {
    border-radius: 6px 6px 14px 14px;
}

.audio .device label {
    color: @onSurface;
}

.audio .device button {
    padding: 0px;
}

.audio .device slider {
    color: @onPrimary;
    background-color: @primary;
    background-size: 20px 20px;
    min-width: 5px;
    min-height: 14px;
    border-radius: 100px;
    padding: 0px;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: -16px;
    margin-bottom: -16px;
    box-shadow: -4px 0px 0px 1px @surfaceContainerLow, 4px 0px 0px 1px @surfaceContainerLow;
}

.audio .device trough {
    background-color: @secondaryContainer;
    min-height: 10px;
}

.audio .device highlight {
    border-radius: 100px 0px 0px 100px;
    background-color: @primary;
}

/* -----------------------------------------------------
 * Calendar
 * ----------------------------------------------------- */

.calendar_widget {
    padding: 4px;
    margin-top: 14px;
    margin-right: 14px;
    background-color: @background;
    border-radius: 20px;
    border: 1px solid @outlineVariant;
}

.calendar_button .overlay_box {
    min-width: 22px;
    min-height: 32px;
}

.calendar_button label {
    font-size: 14px;
    color: @onSurface;
}

.calendar_button.today {
    background-color: @primary;
}

.calendar_button.today label {
    color: @onPrimary;
}

.calendar_button.othermonth label {
    color: mix(@onSurfaceVariant, transparent, 0.3);
}

.calendar_monthyear {
    color: @foreground;
}

/* -----------------------------------------------------
 * Clipboard history
 * ----------------------------------------------------- */

.cliphistory_box {
    border-radius: 20px;
    background-color: @background;
    border: 1px solid;
    border-color: @outlineVariant;
}

.cliphistory_box separator {
    margin: 0px;
}

.cliphistory_entry {
    background-color: @surfaceContainerHigh;
    color: @onSurface;
    border: none;
    outline: none;
    border-radius: 100px;
    margin-bottom: 16px;
    padding-left: 25px;
    margin: 11px;
    min-height: 44px;
}

.clip_container {
    border: none;
    outline: none;
    border-radius: 0px;
    min-height: 40px;
}

.clip_container label {
    margin-left: 11px;
    margin-right: 11px;
}

.clip_container:hover {
    background-color: mix(@onSurface, @surface, 0.92);
}

.clip_container:focus {
    background-color: mix(@onSurface, @surface, 0.8);
    border: 0px solid;
    border: none;
    outline: none;
}

.clip_container:active {
    background-image: radial-gradient(circle, mix(@onSurface, @surface, 0.78) 10%, transparent 0%);
}

.clip_container .clip_id {
    font-weight: 200;
    font-feature-settings: "tnum";
}

.clip_container .preview {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
}

.clip_container .dot_divider {
    font-weight: 900;
    font-size: 12px;
    min-width: 0px;
    margin: 0px;
    color: @outlineVariant;
}

.clip_divider {
    color: @outline;
    margin: 0px;
}

.clip_label {
    color: @onSurface;
    font-weight: normal;
}

.clip_container.with_image .clip_label {
    color: @tertiary;
}

.clear_button {
    margin: 11px;
    margin-left: 0px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 100%;
}

/* -----------------------------------------------------
 * Material
 * ----------------------------------------------------- */

.material_icon,
.material_icon * {
    all: unset;
    font-family: "Material Symbols Outlined", "Material Symbols Sharp";
}

@keyframes ripple {
    to {
        background-size: 1000% 1000%;
    }
}
